<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F0F3F7;
		margin-bottom: 230rpx;

		&-body {

			padding: 0 30rpx;
		}

	}

	.border-bottom {
		box-shadow: 0 2rpx 0 0 #F5F7FA;
	}

	.wrapper {
		padding: 0rpx 20rpx;
		background-color: #fff;
		margin-top: 30rpx;
		box-shadow: 0 32rpx 20rpx -20rpx #E6EBF2;
		border-radius: 20rpx;

		&-head {
			height: 92rpx;
			line-height: 92rpx;

		}
	}

	.label {
		display: flex;
		flex-direction: row;

		&-left {
			&-text {
				font-weight: 600;
				font-size: 32rpx;
				color: #0F2E4D;
			}
		}

		&-right {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: 1;
			justify-content: flex-end;
		}
	}

	.justify {
		&-content {

			&-center {
				justify-content: center !important;
			}

			&-end {
				justify-content: flex-end !important;
			}
		}
	}

	.file {

		&-wrapper {}

		&-item {
			height: 100rpx;
			line-height: 100rpx;
			box-shadow: 0rpx -2rpx 0rpx 0rpx #F5F7FA;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-left {
				width: 95%;

				&__text {
					font-weight: 400;
					font-size: 28rpx;
					display: inline-block;
					color: #409EFF;
					margin-left: 10rpx;

				}
			}

			&-right {
				width: 5%;
			}
		}

	}

	.sign {
		&-label {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
			margin-right: 20rpx;
		}

		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;
		}

		&-wrapper {
			height: 300rpx;
			line-height: 300rpx;
			border: 2rpx solid #DEE2EE;
			border-radius: 10rpx;
			text-align: center;
			font-weight: 500;
			font-size: 44rpx;
			color: #C0C4CC;
		}

		&-img {
			width: 100%;
			height: 100%;

		}
	}

	.other {

		&-label {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
			flex: 1;
		}

		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #409EFF;
			text-align: right;
			flex: 1;
		}

		&-time {
			@extend .other-value
		}

		>li {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

	}

	.p {
		&-b {
			&-30 {
				padding-bottom: 30rpx;
			}
		}
	}

	.rate {
		&-input {
			margin-top: 38rpx;
		}

		li {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
			}

			.value {
				flex: 1;
				margin-left: 46rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 206rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		box-shadow: 0 0 0 2rpx #DEE2EE;
		align-items: center;
		justify-content: center;

		>.cancel {
			width: 25%;

		}

		>.confirm {
			width: 65%;
			padding: 0 20rpx;
		}
	}

	.page {
		width: 100%;
		height: 100%;
		min-height: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<template>

	<view class="container">
		<view class="container-body">
			<!-- 附件 -->
			<view class="wrapper">
				<view class="wrapper-head  ">
					<view class="label">
						<view class="label-left">

							<span class="label-left-text ">
								附件
							</span>
						</view>
						<view class="label-right">
							<u-button shape="circle" @click="onPhotograph" :custom-style="buttonStyle">拍照</u-button>
							<u-button shape="circle" @click="onVideo" :custom-style="buttonStyle">录像</u-button>
							<u-button shape="circle" @click="onUpload" :custom-style="buttonStyle">上传附件</u-button>
						</view>
					</view>
				</view>
				<view class="wrapper-body">
					<ul class="file-wrapper">
						<li class="file-item" v-for="(item,index) in attachment " :key="item.timestamp">
							<view class="file-item-left">
								<u-icon color="#409EFF" size="24" :name="item.icon"></u-icon>
								<span @click="$open(item.file.url)"
									class="file-item-left__text">{{item.file.fileName |rightEllipsis }}</span>

							</view>
							<view class="file-item-right">
								<u-icon name="close" color="#000000" size="18" @click="onRemoveAttachment(index)">
								</u-icon>
							</view>
						</li>
					</ul>
				</view>
			</view>

			<!-- 评价 -->
			<view class="wrapper">
				<view class="wrapper-head border-bottom">
					<view class="label">
						<view class="label-left">
							<span class="label-left-text ">
								评价
							</span>
						</view>
						<view class="label-right">
							<span class="label-right-text" :style="'color:'+''+EvaluationText.color">
								{{EvaluationText.text}}
							</span>
						</view>
					</view>
				</view>
				<view class="wrapper-body">
					<ul class="rate">
						<li class="border-bottom">
							<span class="label">
								服务态度
							</span>
							<view class="value">
								<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
									inactive-color="#98A5B3" v-model="evaluationData.manner"></u-rate>

							</view>
						</li>
						<li class="border-bottom">
							<span class="label">
								服务质量
							</span>
							<view class="value">
								<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
									inactive-color="#98A5B3" v-model="evaluationData.quality"></u-rate>

							</view>
						</li>
						<li class="border-bottom">
							<span class="label">
								响应时效
							</span>
							<view class="value">
								<u-rate :gutter="40" :count="rateParams.count" active-color="#EBB917"
									inactive-color="#98A5B3" v-model="evaluationData.responseTimeliness"></u-rate>

							</view>
						</li>
					</ul>
					<view class="rate-input">
						<u-input type="textarea" placeholder="意见与建议 请填写或语音输入意见与建议" v-model="evaluationData.text">
						</u-input>
					</view>
				</view>
			</view>
			<!-- 签名 -->
			<view class="wrapper  ">
				<view class="wrapper-head border-bottom">
					<view class="label">
						<view class="label-left">
							<span class="label-left-text ">
								签名
							</span>
						</view>
						<view class="label-right justify-content-center">
							<span class="sign-label">签名人</span>
							<span class="sign-value">{{evaluationData.reporter}}</span>
						</view>
					</view>
				</view>
				<view class="wrapper-body  p-b-30">
					<view class="sign-wrapper" @click="onSign">
						<canvas canvas-id="signCanvas" :style="SignCanvasStyle" class="canvsborder"></canvas>

						<!-- <span v-if="evaluationData.signUrl ==''">
							点击此处签名
						</span> -->
						<!-- <img v-else :src="evaluationData.signUrl" class="sign-img" alt=""> -->
						<!-- 旋转图片canvas -->

					</view>
				</view>
			</view>
		</view>
		<view class="container-bottom">

			<view class="bottom paddingBottom">
				<view class="cancel">

					<u-button shape="circle" :custom-style="buttonStyleCancel" @click="onCancel">取消</u-button>
				</view>
				<view class="confirm ">

					<u-button shape="circle" :hair-line="false" :custom-style="buttonStyleConfirm" @click="onConfirm">确认
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				attachment: [],
				evaluationData: {
					file: '',
					// 态度
					manner: 5,
					// 质量
					quality: 5,
					// 响应实效
					responseTimeliness: 5,
					//意见
					text: '',
					//签名文件
					signFile: '',
					//签名图片展示地址 不作参数提交
					signUrl: '',
					//工单号
					orderNum: "",
					//报修人
					reporter: ''
				},
				rateParams: {
					count: 5
				},

				buttonStyle: {
					borderColor: '#409EFF',
					fontSize: '28rpx',
					backgroundColor: '#fff',
					color: "#409EFF",
					marginRight: '20rpx'
				},

				buttonStyleCancel: {
					borderColor: '#DEE2EE',
					fontSize: '28rpx',
					backgroundColor: '#fff',
					color: "#0F2E4D",
				},
				buttonStyleConfirm: {
					fontSize: '28rpx',
					border: 'none',
					backgroundColor: '#409EFF',
					color: "#fff",
				},
				signImg: require('@/static/images/sign.png'),
				canvas: {
					width: '',
					heigth: ''
				}
			}
		},

		computed: {
			/**
			 * 非常满意 15  7,193,96,1
			 * 满意 12 <= 15	  112,179,45,1
			 * 一般 9 <=12	235,185,23,1
			 * 不满意 6<= 9	230,129,57,1
			 * 非常不满意 0<= 6	254,108,108,1
			 */
			EvaluationText() {
				let colors = {
					verySatisfied: 'rgba(7,193,96,1)',
					staisfied: 'rgba(112,179,45,1)',
					generally: 'rgba(235,185,23,1)',
					dissatisfied: 'rgba(230,129,57,1)',
					veryDissatisfied: 'rgba(254,108,108,1)'
				}

				let texts = {
					verySatisfied: '非常满意',
					staisfied: '满意',
					generally: '一般',
					dissatisfied: '不满意',
					veryDissatisfied: '非常不满意',
				}
				let rateData = {
					// 态度
					manner: this.evaluationData.manner,
					// 质量
					quality: this.evaluationData.quality,
					// 响应实效
					responseTimeliness: this.evaluationData.responseTimeliness,
				}
				let rateValues = Object.values(rateData)
				let rateCount = rateValues.reduce((a, b) => {
					return a + b
				})
				let params = {
					text: '暂无评分',
					color: '#ccc'
				}
				if (rateCount > -1 || rateCount) {
					if (rateCount === 15) {
						params = {
							color: colors.verySatisfied,
							text: texts.verySatisfied
						}

					} else if (rateCount < 15 && rateCount >= 12) {
						params = {
							color: colors.staisfied,
							text: texts.staisfied
						}
					} else if (rateCount < 12 && rateCount >= 9) {
						params = {
							color: colors.generally,
							text: texts.generally
						}
					} else if (rateCount < 9 && rateCount >= 6) {
						params = {
							color: colors.dissatisfied,
							text: texts.dissatisfied
						}

					} else {
						params = {
							color: colors.veryDissatisfied,
							text: texts.veryDissatisfied
						}
					}
				}
				return Object.assign(params, {
					rateCount: rateCount || 0
				})

			},

			SignCanvasStyle() {
				return {
					width: this.canvas.width + 'px',
					height: this.canvas.heigth + 'px'
				}
			}
		},
		onLoad(params) {
			this.initParams(params)
			 


		},
		onUnload() {
			this.clearStorage()
		},
		methods: {


			//初始化无签名图片
			initNotSign() {
				let canvas = wx.createCanvasContext('signCanvas');
				canvas.drawImage(this.signImg, 0, 0, 325, 150);
				canvas.draw()
			},

			rotateBase64Img(res) {
				//当前图片的地址  只能使用本地图图片 如果是网络图片 要下载到本地
				let {
					tempFilePath
				} = res;
				const self = this;
				wx.getImageInfo({ // 获取图片的信息
					src: tempFilePath,
					success: (msg) => {
						let height = msg.height / 2 //图片的高
						let width = msg.width / 2
						//开始旋转  旋转方向为顺时针  90  180  270  
						if (width < height) { // 竖变横   左为正底   旋转后 为下为正底 
							//绘制canvas 旋转图片
							let canvas = wx.createCanvasContext('signCanvas');
							// 逆时针旋转90度
							canvas.translate(height / 2, width / 2)
							canvas.rotate(270 * Math.PI / 180)
							canvas.drawImage(tempFilePath, -width / 2, -height / 2, width, height);
							canvas.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中 
								// 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
								wx.canvasToTempFilePath({
									canvasId: 'signCanvas',
									success(res) {
										self.evaluationData.signUrl = res.tempFilePath
									}
								})
							})

						}

					}
				})

			},
			//初始化路由携带过来的参数
			initParams(queryParams) {
				//是否存在新签名或者重新签名
				this.evaluationData.orderNum = queryParams?.orderNum || ''
				this.evaluationData.reporter = queryParams?.reporter || ''
				//存在签名图片地址
				if (queryParams?.tempFilePath) {
					this.readeStorage(queryParams)
				} else {
					this.initNotSign()
				}

			},
			/**
			 * 写入缓存
			 */
			writeStorage() {
				uni.setStorageSync("evaluationData", JSON.stringify(this.evaluationData));
			},
			/**
			 * 读取缓存
			 */
			readeStorage(params) {
				//存在新的签名 或者重新的签名
				let data = uni.getStorageSync('evaluationData');
				this.evaluationData = JSON.parse(data)
				this.handleSign(params)
			},
			/**
			 * 清空缓存
			 */
			clearStorage() {
				uni.removeStorageSync('evaluationData')
			},
			//处理签名
			async handleSign(params) {
				this.rotateBase64Img(params)

			},
			onRemoveAttachment(index) {
				this.attachment.splice(index, 1)
			},
			//拍照
			async onPhotograph() {
				let img = await this.$chooseImg()
				this.attachment.push({
					icon: 'photo',
					file: img,
					timestamp: Date.now()
				})
			},
			// 录像
			async onVideo() {
				let video = await this.$chooseVideo()
				this.attachment.push({
					icon: 'play-circle',
					file: video,
					timestamp: Date.now()
				})
			},

			//上传附件
			async onUpload() {
				let file = await this.$chooseImg()
				this.attachment.push({
					icon: 'file-text',
					file: file,
					timestamp: Date.now()
				})
			},
			onSign() {
				this.writeStorage()
				uni.navigateTo({
					url: '/pages/evaluation/sign'
				})

			},
			// 取消评价
			onCancel() {
				this.clearStorage()
				uni.redirectTo({
					url: '/pages/myOrder/order'
				})
			},
			// 确认评价 
			async onConfirm() {
				let file = ''
				if (!this.evaluationData.signUrl) {
					uni.showToast({
						title: '签名不能为空',
						icon: 'error'
					})
					return
				}
				if (this.evaluationData.signUrl) {
					file = await this.$wxUploadFile({
						tempFilePath: this.evaluationData.signUrl
					})
				}

				let attachment = this.attachment.map((item) => {
					return {
						name: item.file.oldName,
						url: item.file.url
					}
				})
				const params = {
					/** 工单号 */
					orderNum: this.evaluationData.orderNum,
					/** 附件 */
					enclosure: JSON.stringify(attachment),
					/** 服务态度 */
					serviceAttitude: this.evaluationData.manner,
					/** 服务质量 */
					serviceQuality: this.evaluationData.quality,
					/** 响应时效 */
					responsePrescription: this.evaluationData.responseTimeliness,
					/** 意见与建议 */
					commentSuggestion: this.evaluationData.text,
					/** 签名 */
					autograph: file?.url || '',
					/** 评价结果 */
					evaluateResult: this.EvaluationText.rateCount,
					/** 类型（1.完成评价 ，后续有其他再加） */
					type: '1'
				}
				



				await this.$pop.ajaxPost('/busOrderEvaluate/saveOrUpdate', params);
				this.clearStorage()
				wx.showToast({
					title: '评价成功!',
					icon: 'success', 
					mask:true,
					success: () => { 
						setTimeout(() => {
				
							wx.redirectTo({
								url: '/pages/myOrder/order'
							})
							wx.hideToast()
						}, 1500)
					}
				})

			}
		},
	}
</script>
